<template>
  <div :id="chartsData.id" :style="{ width: '100%', height: '420px', backgroundColor: '#fff' }"></div>
</template>
<script>
import echarts from 'echarts'
let echartData = {}
export default {
  data() {
    return {}
  },
  props: ['chartsData'],
  watch: {
    chartsData: {
      // 正确给 cData 赋值的 方法
      deep: true,
      handler(newVal, oldVal) {
        echartData = newVal
      },
    },
  },
  mounted() {
    echartData = this.chartsData
    // echartData = { id: '', data: '', type: 'green', titleText: '近30天摄像机在线率走势', tooltipText: '在线率', tooltipUnit: '%' }
    // echartData = { id: '', data: '', type: 'blue', titleText: '近30天前卫主机及挂载设备消耗能耗', tooltipText: '消耗能耗', tooltipUnit: 'kw' }
    var styleObj = {}
    switch (echartData.type) {
      case 'green':
        styleObj = {
          color: '#34C25B',
          areaStyle: 'rgba(52, 194, 91, 0.3)',
          padding: [5, 10],
          gridLeft: 70,
          gridRight: 50,
          titleText: '近30天摄像机在线率走势',
          tooltipText: '在线率',
          tooltipUnit: '%',
          yAxis: {
            type: 'value',
            boundaryGap: [0, '30%'],
            max: 100,
          },
        }
        break
      default:
        styleObj = {
          color: '#1F90FF',
          areaStyle: '#C1E0FF',
          padding: [5, 20],
          gridLeft: 75,
          gridRight: 80,
          titleText: '近30天运维主机(前卫)及挂载设备消耗能耗',
          tooltipText: '消耗能耗',
          tooltipUnit: 'kw',
          yAxis: {
            type: 'value',
            boundaryGap: [0, '30%'],
          },
        }
        break
    }
    var myChart = echarts.init(document.getElementById(echartData.id))
    const option = {
      title: [
        {
          text: styleObj.titleText,
          top: 15,
          left: 20,
          subtextStyle: {
            fontSize: 28,
          },
          textStyle: {
            fontSize: 14,
            color: '#2F3033',
          },
        },
      ],
      tooltip: {
        // 坐标轴触发
        trigger: 'axis',
        // 坐标轴指示器配置
        axisPointer: {
          // 线
          type: 'line',
          // 线样式
          lineStyle: {
            type: 'dashed',
            color: styleObj.color,
          },
        },
        // 禁用跟随鼠的tips。如果开启，下面注释的部分要打开
        showContent: true,
        // tips背景色
        backgroundColor: 'rgb(50,50,50)',
        // tips内边距
        padding: styleObj.padding,
        // // tips位置
        // position: function(point, params, dom, rect, size) {
        //   return [point[0] - size.contentSize[0] / 2, point[1] - size.contentSize[1] * 1.5]
        // },
        // tips文字样式
        textStyle: {
          color: '#fff',
        },
        // tisp文字内容
        formatter: function (params, ticket, callback) {
          var arr = params[0].value
          return `时间 : ${arr[0]} <br/> ${styleObj.tooltipText} : ${arr[1]}${styleObj.tooltipUnit}`
        },
      },
      grid: {
        borderWidth: 0,
        // containLabel: true,
        top: '15%',
        left: styleObj.gridLeft,
        right: styleObj.gridRight,
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        // axisLabel: {
        //   interval: 0,
        //   rotate: 40,
        // },
      },
      yAxis: styleObj.yAxis,
      series: [
        {
          name: '工单完成',
          type: 'line',
          smooth: 0.6,
          symbol: 'circle',
          symbolSize: 5,
          lineStyle: {
            color: styleObj.color,
            width: 2,
          },
          itemStyle: {
            color: '#fff',
            borderColor: styleObj.color,
          },
          // // 高亮效果
          // emphasis: {
          //   label: {
          //     show: true,
          //     color: '#05E1B6',
          //     padding: [10, 15],
          //     borderRadius: 6,
          //     backgroundColor: 'rgb(50,50,50)',
          //     formatter: '时间 :{@0}  用户人数 : {@1}人'
          //   },
          //   itemStyle: {
          //     color: '#04b390',
          //     borderWidth: 0
          //   }
          // },
          areaStyle: {
            color: styleObj.areaStyle,
          },
          data: echartData.data,
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
